<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/management/land/landInquiry'}">土地查询</el-breadcrumb-item>
            <el-breadcrumb-item>土地详情</el-breadcrumb-item>
        </el-breadcrumb>  
        
        <!-- 卡片视图 -->
        
        <el-card>
            <div class="landDetailsTop">
                <div class="landImg">
                    <el-image style="width: 180px; height: 180px" :src="url" fit="fill"></el-image>
                </div>
                <div class="landDetails">
                    <div class="top">
                        <ul>
                            <li>
                                <p>[土地]{{this.landDetails.landName}}</p>
                            </li>
                            <li>
                                <p>{{this.landDetails.landId}}</p>
                            </li>
                            <li>
                                <el-button plain icon="el-icon-edit" size="mini">修改</el-button>
                            </li>
                        </ul>
                    </div>
                    <!-- tags
                    <div class="middle">
                        <el-tag type="success">标签一</el-tag>
                        <el-tag type="success">标签一</el-tag>
                        <el-tag type="success">标签一</el-tag>
                    </div> -->
                    <div class="footer">             
                        <el-row>
                            <el-col :span="2">
                                <div class="price">
                                    <p>{{this.landDetails.landVal}}万</p>
                                    <span>价值</span>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="landAries">
                                    <p>{{this.landDetails.landArea}} ㎡</p>
                                    <span>土地面积</span>
                                </div>
                            </el-col>
                            <!-- <el-col :span="2">
                                <div class="bulidAries">
                                    <p>{{this.landDetails.bulidAries}}㎡</p>
                                    <span>建筑面积</span>
                                </div>
                            </el-col> -->
                            <el-col :span="2">
                                <div class="type">
                                    <p>{{this.landDetails.landType}}</p>
                                    <span>性质</span>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="getRoad">
                                    <p>{{this.landDetails.landGet}}</p>
                                    <span>获得方式</span>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div class="getDate">
                                    <p>{{this.landDetails.land_create_time}}</p>
                                    <span>获得日期</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="landImages">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in 6" :key="item">
                        <el-image style="height:200px ;width:600px" :src="url" fit="contain"></el-image>
                    </el-carousel-item>
                </el-carousel>
                <div>
                    <p> <i class="el-icon-document-copy"></i> 共{{imgTotal}}张图片(土地、附着物、地籍图纸、权属证书、建筑物)</p>
                </div>
            </div>
            <div class="landFooter">
                <el-row>
                    <el-col :span="6">
                            <p>坐落位置</p>
                            <span>{{this.landDetails.landLocation}}</span>
                       
                            <!-- <p>相关事件</p>
                            <span>{{this.landDetails.above}}</span> -->
                      
                    </el-col>
                    <el-col :span="6">
                  
                            <p>地上附着物</p>
                            <span>{{this.landDetails.landOnInfo}}</span>
                    
                            <p>相关图纸</p>
                            <!-- <img src=" :mapUrl" alt=""> -->
                             <!-- <el-image style="width: 180px; height: 180px" :src="mapUrl" fit="fill"></el-image> -->
                            <!-- <span>{{this.landDetails.landMap}}</span> -->
                            
                    </el-col>
                    
                    <el-col :span="6">
                            <p>地下设施</p>
                            <span>{{this.landDetails.landDownInfo}}</span>
                            <!-- <p>备注</p>
                            <span>{{this.landDetails.remarks}}</span> -->
                    </el-col>
                    
                    <el-col :span="6">
                            <p>其他</p>
                            <span>{{this.landDetails.landOtherInfo}}</span>
                    </el-col>
                </el-row>
            </div>
            
        </el-card>
    </div>
</template>
<script>
export default {
        props:{
            landId:{},
        },
        data() {
            return {
                // 图片地址
                url:'',
                imgTotal:12,
                landDetails:{},
                mapUrl:'',
                information:true
            }  
        },
    created(){
        this.getLandList();
    },
        
    methods:{
        // 获取id相对应的name值
        async getLandList(){
            await this.$http.get(`landView/${this.landId}`).then(res=>{
            //    console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('土地详情获取失败！');
                }
                this.landDetails = res.data.data;
                // this.mapUrl = res.data.data.landMap; 
            }).catch((err)=>{
                console.log(err);
            })
        },    
    }
    
}
</script>
<style scoped>
</style>
